<template>
	<!-- 聊天界面展示https://www.bilibili.com/video/BV1hT4y1P75N?p=22  搭建1和2 -->
	<view class="content">

		<!-- 聊天内容 -->
		<scroll-view :scroll-top="scrollTop" class="chat" scroll-y="true" scroll-with-animation="true"
			:scroll-into-view="scrollToView">

			<view id="sv">
				<view class="chat-main" :style="{paddingBottom:inputh+'px'}">




					<!-- ////////// -->

					<view class="chat-ls" v-for="item in xx" :key="item.id">
						<!-- 消息 -->
						<view class="chat-time" v-if="item.createTime != ''">{{changeTime(item.createTime)}}</view>

						<!-- 对方的消息 -->
						<view class="msg-m msg-left" v-if="item.sendUserId !== Id">
							<image class="user-img" src="../../static/08.jpg"></image>
							<view class="message">
								<!-- 文字 -->
								<view class="msg-text">{{item.message}}</view>
							</view>

						</view>




						<view class="msg-m msg-right" v-if="item.sendUserId==Id">
							<image class="user-img" src="../../static/07.jpg"></image>
							<!-- 头像 -->
							<view class="message">
								<view class="msg-text">{{item.message}}</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<submit @inputs="inputs" @heights="heights"></submit>
	</view>
</template>

<script>
	import dateTime from '@/common/dateTime.js';
	import submit from '../../components/submit/submit.vue';
	import ws from '../../common/websocket.js';


	//音频播放
	const innerAudioContext = uni.createInnerAudioContext();

	export default {
		data() {
			return {
				xx: [],
				timer: null,
				Id: 1,
				msg: [{
						"sendName": "xpq",
						"receviceName": "゛时光い",
						"sendText": {
							"address": "湖南省岳阳市湘阴县新世纪大道",
							"latitude": 28.68925,
							"longitude": 112.90917,
							"name": "湘阴县政府(新世纪大道北)",
						},
						"createTime": "2022-01-06 12:40:12",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 3
					}, {
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": {
							"voice": "时光匆匆流过",
							"time": 2 //秒
						},
						"createTime": "2022-01-06 12:22:12",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 2
					}, {
						"sendName": "xpq",
						"receviceName": "゛时光い",
						"sendText": {
							"voice": "谢谢你",
							"time": 60 //秒
						},
						"createTime": "2022-01-06 12:00:12",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 2
					}, {
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "这是第九条未读消息",
						"createTime": "2022-01-03 12:22:12",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 0
					},
					{
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "这是第八条未读消息",
						"createTime": "2022-01-02 12:22:07",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 0
					},
					{
						"sendName": "xpq",
						"receviceName": "xpq",
						"sendText": "这是第七条未读消息",
						"createTime": "2021-12-19 12:22:03",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 0
					},
					{
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "这是第六条未读消息",
						"createTime": "2021-12-19 12:21:58",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 0
					},
					{
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "http://demo.rageframe.com/attachment/images/2021/11/18/image_1637224530_diIlZlmm.jpeg",
						"createTime": "2021-12-19 12:21:54",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 1
					},
					{
						"sendName": "xpq",
						"receviceName": "゛时光い",
						"sendText": "http://demo2.rageframe.com/attachment/images/2021/09/01/image_1630483477_N03W37zs.jpg",
						"createTime": "2021-12-19 12:21:48",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 1
					},
					{
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "这是第三条未读消息",
						"createTime": "2021-12-19 12:21:42",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 0
					},
					{
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "这是第二条未读消息",
						"createTime": "2021-12-19 12:21:33",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 0
					},
					{
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "http://demo2.rageframe.com/attachment/images/2021/09/01/image_1630483477_N03W37zs.jpg",
						"createTime": "2021-12-19 11:02:18",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 1
					},
					{
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": "爱你啊",
						"createTime": "2021-12-18 20:37:03",
						"updateTime": null,
						"chatmState": 0,
						"TextType": 0
					}
				],
				// 反转数据接收
				unshiftmsg: [],
				imgMsg: [],
				scrollToView: '',
				oldTime: new Date(),
				inputh: '60',
				scrollTop: 0
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select("#sv").boundingClientRect(data => {
				this.scrollTop = data.height
				console.log(this.scrollTop);
			
			}).exec();
			
		},
		onShow() {
			// 数组倒叙 主要是应对后端传过来的数据
			for (var i = 0; i < this.msg.length; i++) {
				//时间间隔处理
				if (i < this.msg.length - 1) { //这里表示头部时间还是显示一下
					let t = dateTime.spaceTime(this.oldTime, this.msg[i].createTime);
					if (t) {
						this.oldTime = t;
					}
					this.msg[i].createTime = t;
				}
				// 获取图片，为下面的预览做准备
				if (this.msg[i].TextType == 1) {
					this.imgMsg.unshift(this.msg[i].sendText)
				}
				this.unshiftmsg.unshift(this.msg[i]);
			}
			// 跳转到最后一条数据 与前面的:id进行对照
			this.$nextTick(function() {
				this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
			})
		},
		components: {
			submit,
		},
		methods: {
			changeTime(date) {
				return dateTime.dateTime1(date);
			},
			// 进行图片的预览
			previewImg(e) {
				let index = 0;
				for (let i = 0; i < this.imgMsg.length; i++) {
					if (this.imgMsg[i] == e) {
						index = i;
					}
				}
				console.log("index", index)
				// 预览图片
				uni.previewImage({
					current: index,
					urls: this.imgMsg,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//音频播放
			playVoice(e) {
				innerAudioContext.src = e;
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			},
			//地图定位
			covers(e) {
				let map = [{
					latitude: e.latitude,
					longitude: e.longitude,
					iconPath: '../../static/定位.png'
				}]
				return (map);
			},
			//跳转地图信息
			openLocation(e) {
				uni.openLocation({
					latitude: e.latitude,
					longitude: e.longitude,
					name: e.name,
					address: e.address,
					success: function() {
						console.log('success');
					}
				});
			},
			//接受输入内容
			inputs(e) {
				//时间间隔处理
				let data = {
					"sendName": "゛时光い",
					"receviceName": "xpq",
					"sendText": e.message,
					"createTime": new Date(),
					"updateTime": new Date(),
					"chatmState": 1,
					"TextType": e.type
				};
				// 发送给服务器消息
				// onSendWS(JSON.stringify(data));

				this.unshiftmsg.push(data);
				// 跳转到最后一条数据 与前面的:id进行对照
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
				})
				if (e.type == 1) {
					this.imgMsg.push(e.message);
				}
				console.log(e)
			},
			//输入框高度
			heights(e) {
				console.log("高度:", e)
				this.inputh = e;
				this.goBottom();
			},
			// 滚动到底部
			goBottom() {
				this.scrollToView = '';
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
				})
			}
		},
		onLoad() {
			ws.init(
				'ws://124.223.164.252:8288/ws',
				function(data) {
					console.log("回调函数接受的数据", data)
				},

			);
			setTimeout((_) => {
				ws.send({
					userId: 1
				});
			}, 2000)

			uni.request({
				url: 'http://124.223.164.252:8489/chat/msgEx',
				method: 'POST',
				data: {
					"receiveUserId": 2,
					"sendUserId": 1

				},


				success: (res) => {
					// this.rm = res.data.data
					console.log('456')
					console.log(res.data.data)
					this.xx = res.data.data

				},
				fail: (err) => {
					console.log(err)
				}
			})


		},
		onShow() {

			setInterval(() => {
				uni.request({
					url: 'http://124.223.164.252:8489/chat/msgEx',
					method: 'POST',
					data: {
						"receiveUserId": 2,
						"sendUserId": 1

					},


					success: (res) => {
						// this.rm = res.data.data

						console.log('798798696868698y866ououopiio808-8-8-8-00')
						console.log(res.data.data)
						this.xx = res.data.data
						const query = uni.createSelectorQuery().in(this);
						query.select("#sv").boundingClientRect(data => {
							this.scrollTop = data.height
							console.log(this.scrollTop);

						}).exec();

					},
					fail: (err) => {
						console.log(err)
					}
				})
			}, 1000)


		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		background-image: url('../../static/16.jpg');
		background-size: 100%;
	}

	.chat {
		height: 100%;

		.chat-main {
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 20rpx;
			// padding-bottom: 120rpx;  //获取动态高度
			display: flex;
			flex-direction: column;
		}

		.chat-ls {
			.chat-time {
				font-size: 24rpx;
				color: rgba(39, 40, 50, 0.3);
				line-height: 34rpx;
				padding: 10rpx 0rpx;
				text-align: center;
			}

			.msg-m {
				display: flex;
				padding: 20rpx 0;

				.user-img {
					flex: none;
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}

				.message {
					flex: none;
					max-width: 480rpx;
				}

				.msg-text {
					font-size: 32rpx;
					color: rgba(39, 40, 50, 1);
					line-height: 44rpx;
					padding: 18rpx 24rpx;
				}

				.msg-img {
					max-width: 400rpx;
					border-radius: 20rpx;
				}

				.msg-map {
					background: #fff;
					width: 464rpx;
					height: 284rpx;
					overflow: hidden;

					.map-name {
						font-size: 32rpx;
						color: rgba(39, 40, 50, 1);
						line-height: 44rpx;
						padding: 18rpx 24rpx 0 24rpx;
						//下面四行是单行文字的样式
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.map-address {
						font-size: 24rpx;
						color: rgba(39, 40, 50, 0.4);
						padding: 0 24rpx;
						//下面四行是单行文字的样式
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.map {
						padding-top: 8rpx;
						width: 464rpx;
						height: 190rpx;
					}
				}

				.voice {
					// width: 200rpx;
					min-width: 100rpx;
					max-width: 400rpx;
				}

				.voice-img {
					width: 28rpx;
					height: 36rpx;
				}
			}

			.msg-left {
				flex-direction: row;

				.msg-text {
					margin-left: 16rpx;
					background-color: #fff;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}

				.ms-img {
					margin-left: 16rpx;
				}

				.msh-map {
					margin-left: 16rpx;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}

				.voice {
					text-align: right;

				}

				.voice-img {
					float: left;
					transform: rotate(180deg);
					width: 28rpx;
					height: 36rpx;
					padding-bottom: 4rpx;
				}
			}

			.msg-right {
				flex-direction: row-reverse;

				.msg-text {
					margin-right: 16rpx;
					background-color: #99ccff;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}

				.ms-img {
					margin-right: 16rpx;
				}

				.msh-map {
					margin-left: 16rpx;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}

				.voice {
					text-align: left;

				}

				.voice-img {
					float: right;
					padding: 4rpx;
					width: 28rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>
